<template>
	<view class="content">
		<view class="index-info">
			<view class="user-info">
				<uv-avatar :src="userInfo?.headimgUrl" shape="circle"></uv-avatar>
				<text class="name">{{ userInfo?.nickName}}</text>
			</view>
			<view class="index-menu">
				<view class="index-menu_item">
					<text class="num">{{ userInfo?.pointsCurrent}}</text>
					<text class="text">积分</text>
				</view>
				<view class="index-menu_item" @click="goPart(2)">
					<text class="num">{{ userInfo?.redPrice}}</text>
					<text class="text">红包</text>
				</view>
				<view class="index-menu_item">
					<text class="num">{{ userInfo?.couponNum}}</text>
					<text class="text">优惠券</text>
				</view>
				<view class="index-menu_item">
					<text class="num">{{ userInfo?.prizeNum}}</text>
					<text class="text">奖品</text>
				</view>
			</view>
		</view>
		<uv-tabs :list="tagList" :scrollable="false" :current="data.tabCur" @change="tabSelect" lineColor="red"
			:activeStyle="{
			color: '#303133',
			fontWeight: 'bold',
			transform: 'scale(1.05)'
    	}">
		</uv-tabs>
		<view class="live-contxt">
			<view class="card" v-for="(item, index) in data.liveList" :key="index">
				<view class="left">
					<uv-image :src="item.coverImage" width="270rpx" height="200rpx"></uv-image>
				</view>
				<view class="right">
					<view class="info">
						<view class="time">开始时间:{{ item.startTime }}</view>
						<view class="name">名称:{{ item.liveName }}</view>
					</view>
					<view class="replay-btn-group">
						<view class="replay-btn" @click="goLive(item,'going')" v-if="data.tabCur == 1">观看</view>
						<view class="replay-btn" @click="goLive(item,'reload')" v-if="data.tabCur == 2 && item.isBack">观看回放</view>
					</view>
				</view>
			</view>
			<view class="noMore" v-if="data.noMore">
				到底了~
			</view>
		</view>
	</view>
	<uv-modal ref="modal" @confirm="readPwd" title="提示">
		<view class="slot-content">
			<view class="m-text">
				该直播已结束， 可观看回放。请输入回放密码
			</view>
			<input type="text" class="m-input" v-model="data.pwd">
			<view v-if="data.error" class="errorMsg">
				密码错误
			</view>
		</view>
		<template v-slot:confirmButton>
			<view class="layerBtn" @click="readPwd">
				确认
			</view>
		</template>
	</uv-modal>

	<uv-modal ref="MoverTime" title="提示" content='该直播回放已超时，无法观看!' @confirm="MoverTimeconfirm"></uv-modal>
	<uv-toast ref="toastLayer"></uv-toast>

</template>

<script setup>
	import {
		getliveList_api,
		userInfoGet
	} from '@/api';
	import {
		useglobal
	} from '@/stores'
	const globalData = useglobal();
	const toastLayer = ref(null);
	const data = reactive({
		error: false,
		swiperList: [
			'https://img1.baidu.com/it/u=897190645,3703751508&fm=253&fmt=auto&app=120&f=JPEG?w=569&h=426'
		],
		userInfo: {},
		tab: [{
			title: '未开始',
			value: 1
		}, {
			title: '进行中',
			value: 2
		}, {
			title: '已结束',
			value: 3
		}],
		tabCur: 1,
		liveList: [],
		page: {
			current: 1,
			size: 5
		},
		total: 0,
		loadmore: false,
		liveId: '',
		shareType: '',
		tzUserId: '',
		liveShareInfo: {},
		pwd: '',
		readRef: true,
		con: {},
		noMore: false
	})

	let tagList = reactive([{
			name: '未开始'
		},
		{
			name: '进行中'
		},
		{
			name: '已结束'
		},
	])
	//获取个人中心
	const userInfo = ref(null);
	const F_userInfoGet = () => {
		userInfoGet().then((res) => {
			userInfo.value = res.data;
		});
	}

	const tabSelect = (item) => {
		data.noMore = false;
		console.log(item);
		data.tabCur = item.index;
		data.page.current = 1;
		data.liveList = [];
		getLiveList();
	}
	//获取直播列表
	const getLiveList = () => {
		const params = {
			...data.page,
			queryStatus: data.tabCur + 1
		}
		getliveList_api(params).then(res => {
			data.total = res.data.total;
			data.liveList.push(...res.data.records);
			
			data.liveList.forEach(item => {
			  item.isBack = Date.now() <= new Date(item.playbackTime).getTime();
			});
			
			if (data.liveList.length == data.total) {
				data.noMore = true;
			}
		}).catch(error => {
			console.error("获取直播列表失败:", error);
			throw error;
		});
	}
	//触底加载
	onReachBottom(() => {
		if (data.liveList.length <= data.total) {
			data.page.current++;
			getLiveList();
		}
	})

	const goPart = (num) => {
		switch (num) {
			case 2:
				uni.navigateTo({
					url: '/pages/mycenter/redPacket',
				});
				break;

			default:
				uni.showToast({
					title: '暂无',
					duration: 2000
				});
				break;
		}
	}
	const modal = ref(null);
	const goLive = (item, str) => {
		data.con = item;
		data.liveId = item.id;
		switch (str) {
			case 'going':
				uni.navigateTo({
					url: `/pages/video/video?liveId=${item.id}`,
				});
				break;
			case 'reload':
				//该直播已结束， 可观看回放。
				if (item.playbackPassword) { //有密码
					data.pwd = '';
					data.error = false;
					modal.value.open()
				} else { //无密码
					uni.navigateTo({
						url: `/pages/video/videoBack?liveId=${item.id}`,
					});
				}
				break;
			default:
				break;
		}
	}
	//输入观看密码后执行
	const readPwd = () => {
		//校验密码后执行逻辑
		if (data.pwd == data.con?.playbackPassword) {
			//成功后
			modal.value.close();
			//进入回放页面
			uni.redirectTo({
				url: '/pages/video/videoBack?liveId=' + data.liveId
			})

			// const params = {
			// 	type: 'success',
			// 	message: "密码正确"
			// }
			// toastLayer.value.show({
			// 	...params,
			// 	complete() {

			// 	}
			// })
		} else {
			//失败
			//modal.value.close();
			// const params = {
			// 	type: 'error',
			// 	message: "密码错误"
			// }
			// toastLayer.value.show({
			// 	...params,
			// 	complete() {
			// 		//data.tvState = 'over'
			// 	}
			// })
			data.error = true;
		}


	}
	//回放超时
	const MoverTime = ref(null);
	const MoverTimeconfirm = () => {
		MoverTime.value.close();
	}

	onLoad(() => {
		// F_userInfoGet();
		// getLiveList();
	})
</script>

<style scoped lang="scss">
	.layerBtn{
		border-top: solid 2rpx #dadada;
		color: rgb(41, 121, 255);
		font-size: 28rpx;
		padding: 20rpx 0;
		text-align: center;
	}
	.errorMsg {
		text-align: center;
		color: red;
		font-size: 24rpx;
		padding: 10rpx auto;
	}

	.content {
		display: flex;
		flex-flow: column nowrap;

		.index-info {
			background-color: #fc4631;
			color: #fff;
			padding: 40rpx;

			.index-menu {
				@extend %flex-row-center;

				.index-menu_item {
					@extend %flex-column-center;
					width: 25%;
					text-align: center;

					.num {
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}

					.text {
						font-size: 24rpx;
					}
				}
			}
		}



		.user-info {
			padding-left: 30rpx;
			margin: 40rpx auto;
			display: flex;
			align-items: center;

			.name {
				margin-left: 30rpx;
			}
		}

		.live-contxt {
			padding: 20rpx;
			flex: 1;

			.card {
				display: flex;
				background: #f2f2f2;
				border-radius: 10px;
				box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
				overflow: hidden;
			}

			.left {
				position: relative;
				width: 300rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 24rpx 0;
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				padding: 32rpx 24rpx;

				.info {
					margin-bottom: 24rpx;

					.time {
						font-size: 24rpx;
						color: #999;
						margin-bottom: 20rpx;
					}

					.name {
						font-size: 28rpx;
						color: #333;
					}
				}

				.replay-btn-group {
					display: flex;
					justify-content: flex-end;
					width: 100%;
					padding-top: 10rpx;
				}

				.replay-btn {
					width: fit-content;
					background: #ef4636;
					color: #fff;
					border: none;
					border-radius: 10rpx;
					padding: 15rpx;
					font-size: 21rpx;
					line-height: 20rpx;
					font-weight: bold;
					cursor: pointer;
				}
			}
		}
	}

	.m-text {
		font-size: 24rpx;
		margin-bottom: 30rpx;
	}

	.m-input {
		border: solid 2rpx #dadada;
		height: 40rpx;
		line-height: 40rpx;
		padding: 10rpx;
	}

	.noMore {
		text-align: center;
		padding: 20rpx;
		color: #999;
		font-size: 24rpx;
	}
</style>